import React, { useContext, useEffect, useState } from 'react';
import { FieldProps } from '@rjsf/utils';
import { Flex, Input } from 'antd';
import { MessageContext } from '../CollapseTemplate';
import { isArray } from 'lodash';

//
export const VectorInputField = ({
  schema,
  formData,
  uiSchema,
  onChange,
  disabled,
}: FieldProps<number[]>) => {
  const [schemaDefault, setSchemaDefault] = useState<any>([]);
  const { layout: layout1 } = useContext(MessageContext);
  const layout = uiSchema['ui:layout'] ?? layout1 ?? [1, 1];

  useEffect(() => {
    const schemaList = schema?.default;
    if (isArray(schemaList) && formData === undefined) {
      if (schemaList.length !== 0) {
        onChange(schemaList);
        setSchemaDefault(schemaList);
      }
    } else {
      setSchemaDefault(formData);
    }
  }, [schema?.default, formData]);
  const onInputChange = (val: string, index: number) => {
    // 复制一份当前数组（保持字符串存储，避免 NaN）
    let temp = [...(schemaDefault || [])];
    // 直接存输入的值（允许 "-", "" 这种中间态）
    temp[index] = val;
    setSchemaDefault(temp);
    // 如果能转成合法数字，再更新 formData
    const num = Number(val);
    if (!isNaN(num) && val !== '' && val !== '-') {
      let numericValues = temp.map((v) =>
        v === '' || v === '-' ? undefined : Number(v),
      );
      onChange(numericValues);
    }
  };

  return (
    <Flex style={{ gap: 5, alignItems: 'center' }}>
      <div style={{ flex: layout[0], fontSize: 12 }}>{schema.title}</div>
      <div style={{ flex: layout[1] }}>
        <Input<number>
          type={uiSchema['ui:type'] ?? 'text'}
          value={schemaDefault?.[0]}
          disabled={disabled}
          prefix={uiSchema['ui:prefix']}
          suffix={uiSchema['ui:suffix']}
          onChange={(e) => onInputChange(e.target.value, 0)}></Input>
      </div>
      <div style={{ flex: layout[2] }}>
        <Input<number>
          type={uiSchema['ui:type'] ?? 'text'}
          value={schemaDefault?.[1]}
          disabled={disabled}
          prefix={uiSchema['ui:prefix']}
          suffix={uiSchema['ui:suffix']}
          onChange={(e) => onInputChange(e.target.value, 1)}></Input>
      </div>
      <div style={{ flex: layout[3] }}>
        <Input<number>
          type={uiSchema['ui:type'] ?? 'text'}
          value={schemaDefault?.[2]}
          disabled={disabled}
          prefix={uiSchema['ui:prefix']}
          suffix={uiSchema['ui:suffix']}
          onChange={(e) => onInputChange(e.target.value, 2)}></Input>
      </div>
    </Flex>
  );
};
/**
 * @description 自定义组件
 * @param {FieldProps} props
 * @returns {JSX.Element}
 * @example
 * schema: {
 InputField: {
 type: 'string',
 title: '输入框',
 default: '123',
 }
 * uiSchema: {
 'ui:FieldTemplate': InputField,
 'ui:type': 'number',
 'ui:prefix': 'expand level=',
 'ui:suffix': 'm',
 }
 * */
